<template>
    <main>
        <!-- Hero Section -->
        <section class="bg-gradient-to-r from-primary to-secondary">
            <div class="py-20 container-custom">
                <div class="text-center text-white">
                    <h1 class="mb-6 text-4xl font-bold md:text-6xl">Sass+数据+Ai人工智能快速报价系统</h1>
                    <p class="mb-8 text-xl md:text-2xl">我们提供最优质的服务和解决方案</p>
                    <button
                        class="px-8 py-3 font-semibold transition-colors bg-white rounded-full text-primary hover:bg-gray-100"
                        @click="gotoProductLogin">
                        了解更多
                    </button>
                </div>
            </div>
        </section>

        <!-- 特色部分 -->
        <section class="py-36">
            <div class="container-custom">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
                    <div class="p-4 text-center">
                        <div class="mb-4 text-4xl text-primary">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3 class="mb-2 text-xl font-semibold">智能报价</h3>
                        <p class="text-gray-600">实现秒级报价，做您的外贸智能助手</p>
                    </div>
                    <div class="p-4 text-center">
                        <div class="mb-4 text-4xl text-primary">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3 class="mb-2 text-xl font-semibold">数据清洗</h3>
                        <p class="text-gray-600">提供快速高效数据解决方案</p>
                    </div>
                    <div class="p-4 text-center">
                        <div class="mb-4 text-4xl text-primary">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="mb-2 text-xl font-semibold">安全可靠</h3>
                        <p class="text-gray-600">企业级的安全保障，保护数据安全</p>
                    </div>
                    <div class="p-4 text-center">
                        <div class="mb-4 text-4xl text-primary">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h3 class="mb-2 text-xl font-semibold">24/7售后服务</h3>
                        <p class="text-gray-600">全天候业务支持服务，保障售后无忧</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";

const router = useRouter();
const gotoProductLogin = () => {
    router.push("/products");
    // window.open("https://quote.1pei.me/login", "_blank");
};
</script>
